<template>
  <div class="panel">
    <div v-show="!isShowbtnConfig">
      <div class="tabs">
        <div class="tabs-item" :class="activeType === 'form' ? 'is-active main-color' : ''" @click.stop="activeType = 'form'">
          表单配置
        </div>
        <div class="tabs-item" v-if="!isFirstNode" :class="activeType === 'handle' ? 'is-active main-color' : ''" @click.stop="activeType = 'handle'">
          处理设置
        </div>
      </div>
      <formConfigComp v-show="activeType === 'form'" :form="form" :isFirstNode="isFirstNode"></formConfigComp>
      <handleComp :taskShapeList="taskShapeList" v-if="activeType === 'handle'" :form="form.dealConfig" :fields="fields" @editBtn="editBtn"></handleComp>
      <div class="oper-btn">
        <el-button size="mini" @click.stop="channel">取消</el-button>
        <el-button type="primary" size="mini" @click.stop="saveUserTask">保存</el-button>
      </div>
    </div>
    <div v-if="isShowbtnConfig">
      <div class="tabs" style="display: flex;align-items: center;">
        <i class="el-icon-back" @click.stop="back"></i><span class="sub-title">编辑</span>
      </div>
      <btnConfig ref="btnConfig" @saveBtnConfig="saveBtnConfig" :form="currObject" :taskShapeList="taskShapeList">
      </btnConfig>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { commonAction } from '@/utils/common';
import btnConfig from './btnConfig.vue'
import formConfigComp from './formConfig.vue';
import handleComp from './handleConfig.vue';
import cloneDeep from 'lodash/cloneDeep'
@Component({
  components: {
    btnConfig,
    formConfigComp,
    handleComp
  }
})
export default class extends Vue {
  [x: string]: any;
  @Prop({ default: [] }) private fields!: any
  @Prop({ default: {} }) private element!: any
  private isFirstNode = false
  private isShowbtnConfig = false
  private handleBtnType = ''
  private currIndex = -1
  private currObject = {}
  private activeType = 'form'
  private handleConfig = {
    handle: 0,
    user: '',
    field: '',
    handler: [{
      name: '提交',
      value: 'submit',
      status: true,
      status1: false,
      remark: '',
      optionalScope: {
        user: [],
        dept: [],
        technology: []
      }
    },
    {
      name: '转派',
      value: 'assign',
      status: true,
      status1: false,
      remark: ''
    },
    {
      name: '终止',
      value: 'stop',
      status: true,
      status1: false,
      remark: ''
    },
    {
      name: '回退',
      value: 'back',
      status: true,
      status1: false,
      remark: '',
      type: 0
    }],
    creater: [{
      name: '提交',
      value: 'submit',
      status: true,
      status1: false,
      remark: ''
    }]
  }

  private form: any = {
    formConfig: [],
    tabConfig: []
  }

  private get taskShapeList () {
    if (this.element) {
      return this.element.parent.children.filter(item => {
        return item.type && item.type === 'bpmn:UserTask'
      }).map(item => {
        return Object.assign({}, { name: item.businessObject.name, id: item.id })
      })
    }
    return []
  }

  private $route: any;

  public getConfigById (activityId: string) {
    commonAction({ url: `/server-flow/action/definition/activity?activityId=${activityId}&workModelId=${this.$route.params.businessId}`, method: 'get' }).then(res => {
      if (res.success) {
        const { dealConfig, formConfig, tabConfig } = res.data
        this.activeType = 'form'
        this.form = {
          dealConfig,
          formConfig,
          tabConfig
        }
        if (this.element?.businessObject?.incoming?.length) {
          if (this.element.businessObject.incoming[0]?.sourceRef?.$type === 'bpmn:StartEvent') {
            this.isFirstNode = true
            return false
          }
        }
        this.isFirstNode = false
      }
    })
  }

  private saveUserTask () {
    if (this.form.dealConfig.assignType === 3 && !this.form.dealConfig.assignInfo) {
      this.$message.error('请选择指派范围')
      return false
    }
    if (this.form.dealConfig.assignType === 2 && !this.form.dealConfig.defaultAssignee) {
      this.$message.error('请选择默认指派人')
      return false
    }
    this.$emit('saveUserTask', this.form)
    commonAction({ url: '/server-flow/action/definition/activity/save', method: 'post', data: Object.assign({}, this.form, { activityId: this.element.id, workModelId: this.$route.params.businessId }) }).then(res => {
      if (res.success) {
        this.isShowbtnConfig = false
      }
    })
  }

  private saveBtnConfig (data: any) {
    this.$set(this.form.dealConfig[this.handleBtnType], this.currIndex, data)
    this.back()
  }

  private channel () {
    this.back()
    this.$emit('channel')
  }

  private editBtn (data: any) {
    this.isShowbtnConfig = true
    const { item, index } = cloneDeep(data)
    this.currObject = item
    this.currIndex = index
    this.handleBtnType = data.type
  }

  private back () {
    this.isShowbtnConfig = false
    this.currIndex = -1
    this.currObject = {}
    this.handleBtnType = ''
  }

  private mounted () {
    console.log('222')
  }
}
</script>
<style scoped>
.el-icon-back {
  color: #A6A6AE;
  margin-right: 12px;
  cursor: pointer;
}
.sub-title {
  color: #303753;
  font-weight: 600;
  font-size: 14px;
}
.oper-btn {
  text-align: right;
  position: fixed;
  bottom: 0px;
  background-color: #fff;
  padding-right: 24px;
  padding-bottom: 12px;
  z-index: 20;
  width: 520px;
}
.tabs {
  box-shadow: rgb(0 0 0 / 30%) 2px 0px 8px;
  padding-left: 24px;
  height: 46px;
}
.tabs-item {
  display: inline-block;
  cursor: pointer;
  margin-right: 40px;
  font-weight: 500;
  padding: 0px;
}
.tabs-item.is-active {
  border-bottom: 2px solid;
  border-bottom-width: 2px;
  line-height: 46px;
  color: #1890ff;
}
</style>
